<template>
  <div class="" ref="getTop">
    <hader />
    <div>
      <van-index-bar :index-list="leftList" v-if="rightList">
        <div v-for="(item, index) in rightList" :key="index">
          <van-index-anchor :index="item.name" />
          <van-cell
            v-for="value in item.data"
            :key="value.id"
            @click="goSongGer(value.id)"
          >
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div class="van-cell-title">
                <img
                  width="45"
                  height="45"
                  ref="imgs"
                  :data-src="value.img1v1Url"
                />
                <!-- <van-image
                  width="45"
                  height="45"
                  lazy-load
                  :src="value.img1v1Url" 
                /> -->
                <span class="custom-title">{{ value.name }}</span>
              </div>
            </template>
          </van-cell>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getSinger } from "../api/singer";
import Hader from "../components/hader.vue";
export default {
  data() {
    return {
      leftList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      rightList: [],
      index:0
    };
  },
  methods: {
    ArtistListFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
    goSongGer(id) {
      console.log(id);
      this.$router.push({ path: "songGerItem", query: { id } });
    },
    checkImgs(){
     
      let io=new IntersectionObserver(ioes=>{
        ioes.forEach(ioe=>{
          let el=ioe.target;
          let intersectionRatio=ioe.intersectionRatio;
          if(intersectionRatio>0 && intersectionRatio<=1){
            if(!el.src){
              el.src=el.dataset.src
            }
            el.onload=el.onerror=()=>io.unobserve(el)
          }
        })
      })
       this.$refs.imgs.forEach(item=>io.observe(item))
      
      
    }
  },
  components: { Hader },
  created() {
    this.ArtistListFun();
    for (let i = 0; i < this.leftList.length; i++) {
      getSinger({
        type: 1,
        area: 96,
        initial: this.leftList[i],
      }).then((data) => {
        let index = this.rightList.findIndex(
          (item) => item.name == this.leftList[i]
        );
        // this.rightList[index].data = data.artists;
        this.$set(this.rightList[index], "data", data.artists);
      });
    }
  },
  mounted(){
      window.addEventListener("scroll", this.checkImgs, true); //监听滚动事件
  },
  beforeUpdate(){
    
  }
};
</script>
<style lang="less">
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  background-color: #d9dadb;
}
</style>
